<template>
  <div class="setimate-price-desc">
    <backfather></backfather>
    <div class="desc-box">
      <img class="car-picture">
      <p class="car-desc">{{this.cardesc}}</p>
      <div class="title-box">
        <p class="title">{{this.rule}}</p>
      </div>
      <div class="message-box">
        <div class="item clearfix">
          <div class="box">
            <p class="left">{{this.base}}</p>
            <p class="right">{{this.basePrice}}元</p>
          </div>
          <p class="desc">{{this.baseDesc}}</p>
        </div>
        <div class="item clearfix">
          <div class="box">
            <p class="left">{{this.only}}</p>
            <p class="right">{{this.onlyPrice}}元</p>
          </div>
          <p class="desc">{{this.onlyDesc}}</p>
        </div>
        <div class="item clearfix">
          <div class="box">
            <p class="left">{{this.time}}</p>
            <p class="right">{{this.timePrice}}元</p>
          </div>
          <p class="desc">{{this.timeDesc}}</p>
        </div>
        <div class="item clearfix">
          <div class="box">
          <p class="left">{{this.night}}</p>
          <p class="right">{{this.nightPrice}}元</p>
          </div>
        </div>
        <div class="item clearfix">
          <div class="box">
          <p class="left">{{this.none}}</p>
          <p class="right">-{{this.nonePrice}}元 / 公里</p>
          </div>
        </div>
        <div class="item clearfix">
          <div class="box">
          <p class="left">{{this.discount}}</p>
          <p class="right">-{{this.discountPrice}}元</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import backfather from 'base/back-father/back-father'

export default {
  data () {
    return {
      cardesc: '接机-商务型-7座别克-GL8',
      rule: '计价规则',
      base: '基础价(包含30公里，60分钟)',
      basePrice: '199',
      baseDesc: '含服务费、油费、车载品费',
      only: '超里程单价（2.5元/公里）',
      onlyPrice: 'xx',
      onlyDesc: '超过30公里开始计算',
      time: '超时单价（0.5元/分钟）',
      timePrice: 'xx',
      timeDesc: '超过60分钟开始计算',
      night: '夜间单价（1元/公里）',
      nightPrice: 'xx',
      discount: '优惠卷抵扣',
      discountPrice: 'xx',
      tips: '预估费用仅供参考，实际费用可能因交通情况、天气等因素不同',
      none: '空驾单价',
      nonePrice: ''
    }
  },
  components: {
    backfather
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
  .setimate-price-desc
    width: 100%
    hieght: auto
    min-height: 100vh
    .desc-box
      width: 280px
      height: auto
      margin: 0 auto
      border-bottom: 1px solid rgb(153, 153, 153)
      .car-picture
        width: 210px
        height: 72px
        margin: 0 auto
        margin-top: 28px
        border: 1px solid red
      .car-desc
        margin-top: 10px
        font-size: 13px
        color: rgb(51, 51, 51)
    .title-box
      position: relative
      width: 100%
      height: auto
      margin-top: 27px
      border-bottom: 1px solid rgb(153, 153, 153)
      .title
        position: absolute
        width: 90px
        height: 13px
        left: 50%
        margin-left: -45px
        top: 50%
        margin-top: -6px
        background-color: #fff
        color: rgb(153, 153, 153)
    .message-box
      width: 100%
      height: auto
      margin-top: 25px
      font-size: 13px
      color: rgb(51, 51, 51)
      padding-bottom: 31px
      .item
        height: auto
        padding-bottom: 18px
      .box
        height: 13px
      .left
        float: left
      .right
        float: right
      .desc
        float: left
        margin-top: 10px
        font-size: 10px
        color: rgb(153, 153, 153)
</style>